<link href="__PUBLIC__/Usercenter/css/usercenter.css" rel="stylesheet" type="text/css"/>
<php>
    $uid=$uid?$uid:is_login();
    $user_info = query_user(array('avatar128', 'nickname', 'uid', 'space_url', 'icons_html', 'score', 'title', 'fans',
    'following', 'weibocount', 'rank_link', 'signature','sentiment','address','doing','sex'), $uid);


    $verify_info =  verify_info($uid);

</php>

<div style="background-color: #fff;  box-shadow: 0px 2px 8px #BBB;">
    <div class="uc_info clearfix" style="min-height: 170px;">
        <div class="col-md-2 col-xs-6">
            <dl>
                <dt>
                <div id="avatar_top_show" style="width: 129px;height: 129px;float: left;margin-top: 21px;position: relative;margin-left:17px;">
                    <a class="avatar_top" href="{$user_info.space_url}" title=""
                       style="display: inline-block;">
                        <img src="{$user_info.avatar128}" class="avatar-img img-responsive"
                             style="border-radius:0; "/>
                    </a>
                    <if condition="is_login() && $user_info['uid'] eq is_login()">
                        <a id="submit_avatar" href="#upload_avatar" class="open-popup-link" style="display: none"><span
                                style="display: block;position: absolute;bottom: 2px;left: 0;width: 60px;line-height: 25px;text-align: center;background: #ccc;color: white;">修改头像</span></a>
                    </if>
                </div>

                </dt>
            </dl>
        </div>
        <div class="col-md-3 col-xs-6">
            <div class="uc_main_info" style="padding: 0">
                <div class="uc_m_t_12 uc_m_b_12 uc_uname" style="margin-bottom: 3px;">
                <span>
                    <a href="{$user_info.space_url}" class="change" title=""
                       style="font-size: 20px;color: #f36119">{$user_info.nickname|htmlspecialchars}</a>
                </span>
                    <span>
                <if condition="$user_info['rank_link'][0]['num']">
                    <volist name="user_info['rank_link']" id="vl">
                        <img src="{$vl.logo_url}" title="{$vl.title}" alt="{$vl.title}"
                             style="width: 16px;height: 16px;vertical-align: middle;margin-left: 2px;margin-top: -6px;"/>
                    </volist>
                </if>
            </span>
                </div>
                <div class="user_info">
                    {$user_info.address|default='未设置地区'}
                </div>
                <div class="user_info ">
                    {$user_info.sex|default='未设置性别'} {$user_info.doing|default='未设置职业'}
                </div>
                <div class="" style="margin: 10px 0;font-size: 16px;">
                    <span class="font_orange">{$user_info.fans}</span> 膜拜 &nbsp; &nbsp; &nbsp; <span
                        class="font_orange">{$user_info.sentiment}</span> 人气
                </div>
                <div class="user_info_btn" style="">
                    <if condition="is_login() && $user_info['uid'] != is_login()">
                        <php>
                            $user_info['is_following'] =
                            D('Follow')->where(array('who_follow'=>is_login(),'follow_who'=>$user_info['uid']))->find();
                        </php>

                        <if condition="$user_info['is_following']">
                            <a href="javascript:void(0);" class="button_change" onclick="ufollow(this,{$user_info['uid']})">
                                <attr title="取消膜拜">已膜拜</attr>
                            </a>
                            <else/>
                            <a href="javascript:void(0);" style="" class="button_change" onclick="ufollow(this,{$user_info['uid']})">膜拜他</a>
                        </if>
                        <a href="#chat_text" style="" class="qq-open-popup-link button_change" to-uid="{$user_info['uid']}" to-nickname="{$user_info['nickname']}">悄悄话</a>
                        <a href="#ask_for_help" style="" class="open-popup-link button_change">求帮忙</a>



                        <!--求帮忙弹框-->
                        <div id="ask_for_help" class="ask_for_help white-popup mfp-hide">
                            <php>
                                $help_list = D('Help/Help')->getList(array('uid'=>is_login()));
                            </php>
                            <h2>求帮忙</h2>
                            <div class="talk_box">
                                <div >
                                    <select class="col-xs-12 form-control" style="margin: 10px 0;" >
                                        <volist name="help_list" id="vo">
                                            <option value="{$vo.id}">{$vo.title}</option>
                                        </volist>
                                    </select>
                                </div>
                                <div>
                                    <textarea class="col-xs-12 form-control" id="" style="height: 100px;"
                                              placeholder="说点什么吧，哪怕就一个逗号~" ></textarea>

                                    <div class="clearfix"></div>
                                    <div class="do_action" style="margin-top: 10px;">
                                        <input type="hidden" id="to_uid" value="{$uid}">
                                        <button id="ask_btn" type="submit" class="btn btn-primary button_change" >求帮忙</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <script>
                            $(function(){
                                $('#ask_btn').click(function(){
                                    var obj = $(this).parents('#ask_for_help');
                                    var help_id = obj.find('select').val();
                                    var content = obj.find('textarea').val();
                                    var to_uid = obj.find('#to_uid').val();
                                    $.post(U('help/usercenter/askforhelp'), {to_uid: to_uid, content: content,help_id:help_id}, function (res) {
                                        if (res.status) {
                                            $('.mfp-close').click();
                                        }
                                        handleAjax(res);


                                    }, 'json');
                                })
                            })
                        </script>
                    </if>
                </div>
            </div>
        </div>
        {:W('Help/Score/avg',array('uid'=>$user_info['uid']))}

        <div class="col-md-3 col-xs-12" style="">
            <div class="pull-left user_info_sina" style="width: 100%">
                <if condition="$verify_info['verified']">
                    <div style="width: 100%;height: 35px;"><img class="pull-right img-responsive" style="height: 35px;" src="{$verify_info['big_logo']}"></div>

                    <div class="pull-left" style="font-size: 16px">
                        {$verify_info.verified_reason|getShortSp=50}
                    </div>
                    <else/>
                    <div class="row" style="margin: 0 auto">
                        <div class="col-xs-12">
                            <p class="text-muted" style="text-align: center; font-size: 20px;width: 100%">
                                <br/><br/>
                                还没认证~~
                                <br/><br/><br/>
                            </p>
                        </div>
                    </div>
                </if>
            </div>
        </div>
    </div>
</div>






<if condition="is_login() && $user_info['uid'] eq is_login()">
    <div id="upload_avatar" class="white-popup mfp-hide clearfix" style="width: 500px;">
        <div style="float: left;width: 300px;">
        <form action="{:U('UserCenter/Config/doUploadAvatar')}" id="avatar_form" method="post"
              enctype="multipart/form-data">
            <if condition="is_ie()">
                <input type="file" class="btn btn-default" name="image"/>
                <else/>
                <p class="hide">
                    <input type="file" name="image"/>
                </p>

                <div class="btn btn-primary" id="select_file_button" style="background-color: #f36119;border-color: #f36119;">添加图片</div>
            </if>
            <p class="text-error" id="submitTip"></p>
        </form>
        <div id="uploaded_image_div" style="display: none;">
            <div class="thumbnail" style="width: 270px;">
                <img id="uploaded_image" style="width: 100%;" class="thumbnails"/>
            </div>
            <p class="text-danger" id="save_avatar_tip"></p>

            <p>
                <button class="btn btn-primary" id="save_avatar_button" data-url="{:U('usercenter/index/doCropAvatar')}" style="background-color: #f36119;border-color: #f36119;">保存</button><!--&nbsp;&nbsp;<a class="btn btn-primary" id="return_avatar_button">取消</a>-->
            </p>
        </div>
        </div>
        <div style="padding: 10px;width: 150px;float: left;text-align: center;margin-top: 33px;">
            <img src="{$user_info.avatar128}" style="width: 128px;height: 128px;margin-bottom: 10px;"/>
            <span>128 像素 * 128 像素</span>
        </div>
    </div>





    <link rel="stylesheet" type="text/css" href="__STATIC__/jcrop/jquery.Jcrop.css"/>
    <script src="__STATIC__/jcrop/jquery.Jcrop.js"></script>
    <script src="__STATIC__/browser/jquery.browser.js"></script>
    <script>
        var temp;

        $(function () {
            var crop;
            var jcrop_api;
            //选择图片文件之后立即上传表单
            $('[name=image]').change(function () {
                $('#avatar_form').submit();
            });

            $('#avatar_form').submit(function (e) {
                e.preventDefault();

                $.ajax(this.action, {
                    files: $(":file", this),
                    iframe: true,
                    processData: false
                }).complete(function (data) {
                            var json = data.responseJSON;

                            $('#avatar_form').trigger('onJson', [json])
                        });
            });

            //头像上传后显示图片内容
            $('#avatar_form').bind('onJson', function (e, json) {
                //如果发生错误，则显示错误信息
                if (!json.success) {
                    $('#upload_tip').text(json.message);
                }

                //隐藏图片上传表单
                $('#avatar_form').hide();

                //显示图片内容
                $('#uploaded_image').attr('src', json.image);
                $('#uploaded_image_div').show();

                //图片加载完之后 开启图片切割
                $('#uploaded_image').load(function () {
                    $('#uploaded_image').Jcrop({
                        aspectRatio: 1,
                        onSelect: updateCoordinate,
                        minSize: [64, 64],
                        setSelect: [0, 0, 366, 366],
                        boxHeight: 400
                    }, function () {
                        jcrop_api = this;
                        crop = jcrop_api.tellScaled();
                    });


                })
            });
            function updateCoordinate(c) {
                crop = c;
            }

            //点击选择文件按钮之后显示选择文件对话框
            $('#select_file_button').click(function () {
                $('[name=image]').trigger('click');
            });

            //点击保存头像后
            function showAvatarTip(text) {
                $('#save_avatar_tip').text(text);
            }

            $('#save_avatar_button').click(function () {
                //检查是否已经裁剪过
                if (crop.w == undefined || crop.w == 0) {
                    showAvatarTip('请先选出图片中需要的部分');
                    return;
                }

                //显示正在保存
                $(this).text('正在保存');
                $(this).addClass('disabled');

                //隐藏错误消息
                showAvatarTip('');

                //提交到服务器
                var url = $(this).attr('data-url');
                var imageWidth = $('.jcrop-holder img').width();
                var imageHeight = $('.jcrop-holder img').height();
                var crop2 = crop.x / imageWidth + ',' + crop.y / imageHeight + ',' + crop.w / imageWidth + ',' + crop.h / imageHeight;
                $.post(url, {crop: crop2}, function (a) {
                    if (a.status) {
                        if (a.url) {
                            location.href = a.url;
                        }
                    } else {
                        showAvatarTip(a.info);

                        //恢复按钮
                        $('#save_avatar_button').text('保存');
                        $('#save_avatar_button').removeClass('disabled');
                    }
                });
            })
        })

        $('#avatar_top_show').mouseover(function () {
            $('#submit_avatar').show();
        });
        $('#avatar_top_show').mouseout(function () {
            $('#submit_avatar').hide();
        });
    </script>
</if>
<script>
    $('.open-popup-link').magnificPopup({
        type: 'inline',
        midClick: true, // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
        closeOnBgClick: false
    });
</script>